<template>
    <div class="index">
        <div class="top">
            <div class="one" @click="showModel">
                <div class="left">
                    <i class="iconfont icondingwei dingwei"></i>
                </div>
                <div class="right right-One" > 
                   <van-notice-bar color="#333" background="#fff" :speed="20" :delay="1" v-if="!this.$route.query.val">
                    {{ProvinceCity}}
                   </van-notice-bar>
                   <van-notice-bar color="#333" background="#fff" :speed="20" :delay="1" v-else>
                    {{this.$route.query.val}}
                   </van-notice-bar>
                    <!-- <p v-if="this.$route.query.val==undefined">{{ProvinceCity}}</p>
                    <p v-else>{{this.$route.query.val}}</p> -->
                    <!-- <p>多云 21℃</p> -->
                    <p class="rightweather">
                        <marquee direction="left" scrollamount="3">
                        <iframe 
                        scrolling="no" 
                        src="https://tianqiapi.com/api.php?style=te&skin=pitaya&fontsize=10" 
                        frameborder="0" 
                        width="150"
                        height="24" 
                        allowtransparency="true" 
                        >
                        </iframe>
                        </marquee>
                    </p>
                </div>
            </div>
            <div class="two">
                <form action="/">
                  <van-search
                    v-model="value"
                    placeholder="搜索地区"
                    shape="round"
                    @search="onSearch"
                    background="#ffffff"
                  />
                </form>
            </div>
        </div>
        <div class="bgcolor">
        </div>
        <div class="banner">
            <van-swipe :autoplay="3000">
                <van-swipe-item v-for="(image, index) in bannerList" :key="index">
                    <img :src="image.slideshowUrl" style="width:6.9rem;height:3.5rem"  @click="goBannerDetail(image.id)"/>
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="notice">
            <van-notice-bar
                :text="noticeText"
                left-icon="volume-o"
                :scrollable="true"
            />
        </div>
        <div class="content">
            <ul>
                <li @click="goNotive('村部通知')">
                    <img src="../assets/index/index01.png" alt="">
                    <span>村部通知</span>
                </li>
                <li @click="goNotive('村内事')">
                    <img src="../assets/index/index02.png" alt="">
                    <span>村内事</span>
                </li>
                <li @click="goNotOpen">
                    <img src="../assets/index/index03.png" alt="">
                    <span>需求</span>
                </li>
                <li @click="goNotOpen">
                    <img src="../assets/index/index04.png" alt="">
                    <span>扶贫政策</span>
                </li>
                <li @click="goNotOpen">
                    <img src="../assets/index/index05.png" alt="">
                    <span>救助扶贫</span>
                </li>
                <li @click="goNotOpen">
                    <img src="../assets/index/index06.png" alt="">
                    <span>致富经</span>
                </li>
                <li @click="goNotOpen">
                    <img src="../assets/index/index07.png" alt="">
                    <span>种养技术</span>
                </li>
                <li @click="goNotOpenFeed">
                    <img src="../assets/index/index08.png" alt="">
                    <span>意见建议</span>
                </li>
            </ul>
        </div>
        <!-- 身份认证弹窗 -->
        <div class="showModel" v-show="showModelA">
                <div class="showBox">
                    <div class="one">
                        <i class="iconfont iconshanchuguanbicha" @click="closeShowModel"></i>
                    </div>
                    <div class="two">{{authentication}}</div>
                    <div class="three">
                        <img src="../assets/task/shnefen.png" alt />
                    </div>
                    <div class="four" @click="goRealName" v-show="Noauthentication">立即认证</div>
                </div>
        </div>
        <!-- 村庄热度榜 -->
        <div class="hot">
            <img src="../assets/index/index09.png" alt="">
            <span>村庄热度榜</span>
        </div>
        <div class="hot_type">
            <ul>
            <li v-for="(item, index) in villageHot" :key="index">
                <img :src="item.heatUrl" alt="" v-if="item.heatUrl == null?false:true">
                <img src="../assets/index/index10.png" alt="" v-else>
                <p>{{item.heatNane}}</p>
            </li>
            </ul>
        </div>
        <!-- 村部通知 -->
        <div class="hot">
            <img src="../assets/index/notice.png" alt="">
            <span class="hot-left">村部通知</span>
            <span class="hot-right" @click="goNotive('村部通知')">查看更多></span>
        </div>
        <!-- 下面列表 -->
        <div class="list">
            <ul>
                <li v-for="(item, index) in dataListTo" :key="index" @click="godetail(item.id)">
                    <div class="left" v-if="item.villageUrl !=  null?true:false">
                        <img :src="item.villageUrl" alt="">
                    </div>
                    <div class="left" v-else> 
                        <img src="../assets/index/index13.png" alt="">
                    </div>
                    <div class="right">
                        <p class="tit">
                            <span>{{item.villageNoticeName}}</span>
                            <span>{{item.villageTime}}</span>
                        </p>
                        <p class="middle" v-html="intercept(item.villageSketch)"></p>
                        <p class="bottom">
                            <i class="iconfont iconyanjing"></i>
                            <span>{{item.villageLook}}</span>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 资讯 -->
        <div class="information">
            <img src="../assets/index/information.png" alt="">
            <span class="information-left">资讯</span>
            <span class="information-right" @click="goReadMore">查看更多></span>
        </div>
        <div class="informationList">
            <ul>
                <li class="listData" v-for="(item,index) in consultDataList" :key="index" 
                   @click='goConsultDetail(item.consultId)' 
                 >
                    <div class="top">
                        <div class="left">
                            <h3>{{item.consultTitle}}</h3>
                            <p v-html="item.consultContent"></p>
                        </div>
                        <div class="right">
                            <img :src="item.consultUrl" alt="">        
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="left_con">
                            <span v-if="item.top==1">置顶</span>
                            <!-- <b>{{item.source}}</b> -->
                            <span>{{item.consultTime |dateFmt("YYYY-MM-DD")}}</span>
                        </div> 
                        <div class="right_con" >
                            <span>{{item.consultTags}}</span>
                            <span>讨论</span>
                        </div>   
                    </div>
                </li>
            </ul>
        </div>
        <tab-bar :Zindex = "zindex"></tab-bar>
        <van-overlay :show="show" @click.stop="show = false">
          <div class="wrapper" >
            <div class="block" >
                 <ul>
                   <li @click="getNamePhone(item.userId)" v-for="(item,index) in addressList" :key="index">
                     <span>{{item.userName}}</span><span>{{item.userTel}}</span>
                   </li>
                  
                 </ul> 
            </div>
          </div>
        </van-overlay>
    </div>
</template>
<script>
import { NoticeBar, Toast, Loading, Popup ,Overlay  } from "vant";
import { Swipe, SwipeItem } from "vant";
import BMap from "BMap";
import tabBar from "../components/tabBar";

import Vue from "vue";
export default {
  name: "index",
  data() {
    return {
      active: 0,
      url: "",
      value: "",
      model: false,
      seachModel: false,
      nearVillage: [], //附近村庄
      recomVillage: [], //推荐村庄
      villageHot: [], //热度排行榜
      seachList: [],
      dataList: [],
      bannerList: [],
      //  vName:'1111',
      notice: "", //通知
      zindex: false,
      MyuserId: "", //用户id
      showModelA: false,
      authentication: "身份认证",
      Noauthentication: true,
      villagename: "", //村庄名字
      LocationProvince: "正在定位所在省", //给渲染层定义一个初始值
      LocationCity: "正在定位所在市", //给渲染层定义一个初始值
      LocationCounty: "正在定位所在县城",
      Locationstreet: "",
      LocationSnumber: "",
      Span: "",
      SpanOne: "",
      SpanTwo: "",
      consultDataList: [], //咨询列表
      noticeText:'',//小喇叭
      show:false,
      addressList:[],
    };
  },
  computed: {
    token() {
      return this.$store.state.token;
    },
    ProvinceCity() {
      // this.villagename==this.$route.query.val
      return this.villagename == "" || this.villagename == undefined
        ? this.LocationCity
        : this.villagename;
    },
    dataListTo() {
      let Alist = [];
      if (this.dataList.length < 2 || this.dataList.length == 2) {
        return this.dataList;
      } else {
        for (let i = 0; i < 2; i++) {
          Alist.push(this.dataList[i]);
        }
        return Alist;
      }
    }
  },
  watch: {
    token(val) {},
    deep: true
  },
  created() {
    console.log(this.$route.query.val, "是否选择过地址");
    this.PresentPosition();
    //取出用户id
    this.MyuserId = JSON.parse(localStorage.getItem("key")).userId;
    this.url = window.domain;
    this.weather(); //村庄
    if (this.token) {
      // this.getVaillage()   暂无用
      this.getVaillageHot();
      this.getVillageNotice();
      // this.getBanner()  ;
      this.getConsultData();
    }
    // this.PresentPosition();

    //监听当前页面的所有点击事件
    window.addEventListener("click", this.handleZindex, true);
    //获取原窗口的高度
    var originalHeight =
      document.documentElement.clientHeight || document.body.clientHeight;
    // window.οnresize=function(){
    //     //键盘弹起与隐藏都会引起窗口的高度发生变化
    //         var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
    //         if(resizeHeight-0<originalHeight-0){
    //             //当软键盘弹起，在此处操作
    //             this.zindex = true;
    //             }else{
    //             this.zindex = false;
    //             //当软键盘收起，在此处操作
    //         }
    // }
    this.getTrumpet()
  },
  mounted() {
    // 监听浏览器返回
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.goBack, false);
    }
  },
  destroyed() {
    // 销毁监听事件
    window.addEventListener("click", this.handleZindex, true);
    // 销毁监听浏览器事件
    window.removeEventListener("popstate", this.goBack, false);
  },
  methods: {
    //获取搜索框内容
    getNamePhone (num){
       localStorage.setItem('namePhoneId',num)
       this.value='';
    },
    //去轮播详情
    goBannerDetail(num) {
      this.$router.push({
        path: "/bannerDetail",
        query: {
          id: num
        }
      });
    },
    //小喇叭\
     getTrumpet (){
        this.$axios.post('/cct/notice/trumpet',{}).then(res =>{
            console.log("小喇叭",res)
            if(res.data.code==0){
               this.noticeText =res.data.msg;
            }
        })
     }, 
    //村庄
    weather() {
      //     this.$axios.get("/user/auth/5/"+this.MyuserId
      //     ).then(res =>{
      //         //  console.log("村庄",res.data)
      //         this.villagename = res.data.vname;
      //         localStorage.setItem('vid',JSON.stringify(res.data.vid));
      //    })
    },
    //获取用户位置
    PresentPosition() {
      const geolocation = new BMap.Geolocation();
      var _this = this;
      geolocation.getCurrentPosition(
        function getinfo(position) {
          console.log("111", position);
          let Snumber = position.address.street_number; //门牌号
          let Sstreet = position.address.street; //街道
          let county = position.address.district; //获取区
          let city = position.address.city; //获取城市信息
          let province = position.address.province; //获取省份信息
          _this.LocationProvince = province;
          _this.LocationCity = city;
          _this.LocationCounty = county;
          _this.Locationstreet = Sstreet;
          _this.LocationSnumber = Snumber;

          // 获取最近代理商id
          _this.findAgency(position.latitude, position.longitude);
        },
        function(e) {
          _this.LocationCity = "定位失败";
        },
        { provider: "baidu" }
      );
      // console.log("111",this.LocationProvince)
    },
    // 获取最近代理商id
    findAgency(latitude, longitude) {
      console.log("获取附近区域联系人", this.$route.query.val);
      if (!this.$route.query.val) {
        localStorage.setItem("latiName", latitude); //储存经纬度
        localStorage.setItem("longName", longitude); //储存经纬度
        this.$axios
          .post("/cct/num/findAgency", {
            resellerLng: longitude,
            resellerLat: latitude
          })
          .then(res => {
            console.log("获取附近区域联系人1", res.data.rows[0].userId);
            localStorage.setItem("agencyId", res.data.rows[0].userId); //获取经纬度
            if (res.data.code == 0) {
              this.getBanner(res.data.rows[0].userId);
            }
          });
      } else {
        this.$axios
          .post("/cct/num/findAgencyByAdress", {
            adress: this.$route.query.val
          })
          .then(res => {
            console.log("获取附近区域联系人2", res);
            localStorage.setItem("agencyId", res.data.rows[0].userId); //获取经纬度
            localStorage.setItem("latiName", res.data.rows[0].resellerLat); //储存经纬度
            localStorage.setItem("longName", res.data.rows[0].resellerLng); //储存经纬度
            if (res.data.code == 0) {
              this.getBanner(res.data.rows[0].userId);
            }
          });
      }
    },

    //搜索村庄重新赋值
    // clickSeachVillage (num,id){
    //     this.SpanOne = "";
    //     this.SpanTwo = "";
    //     this.Span = id;
    //     this.villagename = this.seachList[num].vname
    // },
    //关闭身份认证弹窗
    closeShowModel() {
      this.showModelA = false;
    },
    //实名认证
    goRealName() {
      this.$router.push({
        path: "/Autonym",
        query: { theme: "实名认证", url: "/index" }
      });
    },
    //推荐村庄
    clickRecommendVillage(num, id) {
      this.SpanTwo = "";
      this.Span = "";
      this.SpanOne = id;
      this.villagename = this.recomVillage[num].vname;
      localStorage.setItem("vid", JSON.stringify(id));
    },
    //附近村庄
    clickNearVillage(num, id) {
      this.SpanOne = "";
      this.Span = "";
      this.SpanTwo = id;
      this.villagename = this.nearVillage[num].vname;
      localStorage.setItem("vid", JSON.stringify(id));
    },
    //获取村庄
    //咨询列表
    getConsultData() {
      this.$axios.post("/cct/consult/findByConsultUserid", {}).then(res => {
        console.log("咨询列表", res);
        if (res.data.code == 0) {
          this.consultDataList = res.data.rows;
        }
      });
    },
    //首页轮播图
    getBanner(id) {
      // this.$axios.post('/cct/slideshow/appList',{

      // }).then(res =>{
      //     if(res.data.code==0){
      //         this.bannerList=res.data.rows;
      //     }
      // })
      console.log(id, "首页轮播图id");
      this.$axios
        .post("/cct/slideshow/appSlideshowList", {
          agencyId: id
        })
        .then(res => {
          if (res.data.code == 0) {
            console.log("轮播图:", res.data.rows);
            this.bannerList = res.data.rows;
          }
        });
    },
    //村内事
    goNotive(e) {
      // console.log(e)
      if (e == "村部通知") {
        this.$router.push({ path: "/notice", query: { value: e } });
      } else if (e == "村内事") {
        console.log(localStorage.getItem("agencyId"), "村内事附近代理人id"); //获取经纬度
        var id = localStorage.getItem("agencyId");
        this.$router.push({ path: "/notice", query: { value: e, id: id } });
      } else {
        this.openShowModel({ path: "/notice", query: { value: e } });
      }
    },
    //村庄热度排行
    getVaillageHot() {
      this.$axios.post("/cct/heat/appList", {}).then(res => {
        console.log("村庄热度排行", res);
        if (res.data.code == 0) {
          this.villageHot = res.data.rows;
        }
      });
    },
    //搜索
    onSearch() {
      this.$axios.post('/cct/num/findByAdress',{
        resellerAddress:this.value
      }).then(res =>{
        console.log("搜索",res)
        if(res.data.code==0){
          this.addressList =res.data.data;
          if(res.data.data.length>0){
            this.show=true
          }
          
           Toast(res.data.msg);
        }else{
          Toast(res.data.msg);
        }
      })
      
    },
    //监听input框
    Zindex() {
      this.zindex = true;
      this.model = true;
    },
    handleZindex() {
      if (this.zindex) {
        this.zindex = false;
        this.model = false;
      }
    },
    //获取村部通知内容
    getVillageNotice() {
      this.$axios.post("/cct/notice/userlook", {}).then(res => {
        console.log("首页村部通知", res);
        if (res.data.code == 0) {
          this.dataList = res.data.rows;
          // var arr=res.data.rows;
          // var n=1;
          // if(arr.length >  1){
          //     // this.notice=arr[0].noticeTitle ;
          //     setInterval(() =>{
          //         this.notice=arr[n].noticeTitle ;
          //         n++;
          //         if(n>=arr.length){
          //              n=0
          //         }
          //     },4000)
          // }
          //  else{
          //     this.notice=arr[0].noticeTitle ;
          // }
        }
      });
    },
    //去详情
    godetail(val) {
    //   this.$router.push({
    //     path: "/detaile",
    //     query: {
    //       id: val
    //     }
    //   });
    console.log(val,'去详情')
      this.$router.push({ path: "/detaile", query: { idd: val } });
    },
    //显示模态框
    showModel() {
      //   this.model=true;
      this.$router.push({
        path: "/location",
        query: {
          province: this.LocationProvince,
          location: this.LocationCity
        }
      });
    },
    //村维修
    goMaintenance() {
      this.$router.push({ path: "/maintenance", query: { paths: "index" } });
    },
    //功能暂未开放
    goNotOpen() {
      this.$router.push("/notOpen");
    },
    goNotOpenFeed() {

      this.openShowModel("/FeedOPen");
    },
    //审核状态
    openShowModel(url) {
      this.$axios
        .get("/user/auth/selectAuthUId?id=" + this.MyuserId)
        .then(res => {
          // console.log("审核状态",res);
          if (res.data.code == 0) {
            if (res.data.data == 0) {
              this.showModelA = true;
              this.authentication = "正在审核中";
              this.Noauthentication = false;
              // Toast("正在实名制认证审核中")
            } else if (res.data.data == 2 || res.data.data == 4) {
              this.showModelA = true;
              this.authentication = "身份认证";
              this.Noauthentication = true;
              // Toast("请提交实名制认证")
            } else {
              this.$router.push(url);
            }
          }
        });
    },
    intercept(i) {
      if (i.indexOf("<img src=") == -1) {
        if (i.length < 50) {
          return i;
        } else {
          let subs = i.substring(4, 24);
          return subs;
        }
      } else {
        let sub = i.substring(
          i.indexOf("<img src="),
          "<img src=" + i.indexOf("<img src=").length
        );
        return sub;
      }
    },
    goBack() {
      mui.init({
        keyEventBind: {
          backbutton: true //关闭back按键监听
        }
      });
      //首页返回键处理
      // 处理逻辑： 1s内，连续两次按返回键，则退出应用；
      var first = null;
      mui.back = function() {
        // 首次按键， 提示 再按一次退出应用
        if (!first) {
          first = new Date().getTime(); //记录第一次按下回退键的时间
          mui.toast("再按一次退出应用");
          //   history.go(-1); // 回退到上一页
          setTimeout(function() {
            //1s 后清除
            first = null;
          }, 1000);
        } else {
          if (new Date().getTime() - first < 1000) {
            //如果两次按下的时间小于1s
            plus.runtime.quit(); //那么就退出app
          }
        }
      };
    },
    //查看更多资讯
    goReadMore() {
      this.$router.push("/readMore");
    },
    //首页去
    goConsultDetail(val) {
      this.$router.push({
        path: "/advisoryDetails",
        query: {
          id:val
        }
      });
    },
    //格式化时间
    dateFormat(fmt, date) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    }
  },
  components: {
    "tab-bar": tabBar
  }
};
</script>

<style lang="less" scoped>
.index {
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  position: relative;
  font-size: 0;
  // position: absolute;
  // top:0rem;
  // left: 0rem;
  .one {
    margin-top: 0.06rem;
  }
  .top {
    display: flex;
    justify-content: flex-start;
    font-size: 0.2rem;
    width: 100%;
    padding: 0.2rem;
    box-sizing: border-box;
    background-color: #fff;
    .one {
      width: 1.43rem;
      display: flex;
      align-items: center;
      .left {
        margin-right: 0.1rem;
        font-size: 0.16rem;
        i {
          font-size: 0.3rem;
        }
      }
      .right-One {
        width: 100%;
        height: 0.88rem;
        position: relative;
        overflow: hidden;
        text-align: center;
        .van-notice-bar {
          height: 0.3rem;
          padding: 0;
        }
        .rightweather {
          position: absolute;
          left: 0rem;
          top: 0.48rem;
          // padding-left: -50px;
        }
      }
    }
    .two {
      width: 5.8rem;
    }
  }
  .bgcolor {
    background-image: url("../assets/index/bgcolor01.png");
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 3.29rem;
    background-size: cover;
  }
  .banner {
    width: 100%;
    text-align: center;
    margin-top: -2.9rem;
    height: 3.3rem;
    .van-swipe {
      height: 3.3rem;
      .van-swipe__track {
        width: 100%;
        border-radius: 0.3rem;
      }
      img {
        border-radius: 0.3rem;
      }
    }
  }
  .notice {
    width: 100%;
    margin: 0 auto;
  }
  .content {
    width: 100%;
    background-color: #fff;
    ul {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 0.2rem 0.4rem;
      box-sizing: border-box;
      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0.26rem;
        color: #666;
        width: 25%;
        margin-bottom: 0.3rem;
        img {
          width: 0.88rem;
          height: 0.88rem;
          margin-bottom: 0.1rem;
        }
      }
    }
  }
  // 身份认证
  .showModel {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 5;
    .showBox {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
      margin-top: 3rem;
      background-color: #fff;
      width: 5.75rem;
      height: 5.32rem;
      border-radius: 0.2rem;
      padding: 0.15rem 0.2rem;
      box-sizing: border-box;
      font-size: 0.26rem;
      .one {
        text-align: right;
        i {
          font-size: 0.3rem;
        }
      }
      .two {
        text-align: center;
        margin-top: 0.2rem;
        font-size: 0.36rem;
        color: #333333;
        font-weight: R;
      }
      .three {
        width: 2.04rem;
        height: 2.04rem;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto;
        margin-top: 0.3rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .four {
        margin: 0 auto;
        width: 3.41rem;
        height: 0.65rem;
        line-height: 0.65rem;
        text-align: center;
        color: #fff;
        font-size: 0.32rem;
        background: rgba(56, 168, 63, 1);
        border-radius: 0.33rem;
        margin-top: 0.45rem;
      }
    }
  }

  .hot {
    width: 100%;
    height: 0.7rem;
    line-height: 0.7rem;
    background-color: #fff;
    padding-left: 0.4rem;
    box-sizing: border-box;
    margin-top: 0.2rem;
    img {
      width: 0.3rem;
      height: 0.36rem;
      vertical-align: -4px;
    }
    span {
      display: inline-block;
      font-size: 0.26rem;
      color: #666;
      margin-left: 0.2rem;
    }
    .hot-left {
      display: inline-block;
      font-size: 0.26rem;
      color: #666;
      margin-left: 0.2rem;
    }
    .hot-right {
      font-size: 0.26rem;
      color: #666;
      float: right;
      margin-right: 0.3rem;
    }
  }
  .hot_type {
    width: 100%;
    overflow-x: scroll;
    padding: 0.2rem 0;
    box-sizing: border-box;
    ul {
      display: flex;
      justify-content: flex-start;
      padding: 0 0.28rem;
      box-sizing: border-box;
      li {
        width: 2.16rem;
        margin-left: 0.15rem;
        img {
          width: 100%;
          height: 1.4rem;
        }
        p {
          font-size: 0.24rem;
          color: #fff;
          font-family: MicrosoftYaHei;
          width: 2.13rem;
          height: 0.58rem;
          background: rgba(56, 168, 63, 1);
          border-radius: 0.1rem;
          line-height: 0.58rem;
          text-align: center;
          margin-top: 0.1rem;
        }
      }
    }
  }
  .list {
    margin-top: 0.2rem;
    display: flex;
    justify-content: flex-start;
    // margin-bottom: 1rem;
    ul {
      li {
        width: 100%;
        padding: 0.2rem 0.3rem;
        box-sizing: border-box;
        background-color: #fff;
        display: flex;
        justify-content: flex-start;
        font-size: 0.26rem;
        margin-bottom: 0.2rem;
        .left {
          width: 1.66rem;
          height: 1.47rem;
          margin-right: 0.2rem;
          img {
            width: 1.66rem;
            height: 1.47rem;
          }
        }
        .right {
          width: 5rem;
          p.tit {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.1rem;
            span {
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              &:nth-child(1) {
                width: 2.01rem;
                font-weight: bold;
                color: #333;
              }
            }
          }
          p.middle {
            width: 4.8rem;
            height: 0.65rem;
            font-size: 0.2rem;
            color: #999;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          p.bottom {
            font-size: 0.2rem;
            color: #999;
            text-align: right;
            i {
              vertical-align: -1px;
            }
          }
        }
      }
    }
  }
  //资讯
  .information {
    width: 100%;
    height: 0.7rem;
    line-height: 0.7rem;
    background-color: #fff;
    padding-left: 0.4rem;
    box-sizing: border-box;
    img {
      width: 0.3rem;
      height: 0.36rem;
      vertical-align: -4px;
    }
    .information-left {
      display: inline-block;
      font-size: 0.26rem;
      color: #666;
      margin-left: 0.2rem;
    }
    .information-right {
      font-size: 0.26rem;
      color: #666;
      float: right;
      margin-right: 0.3rem;
    }
  }
  //咨询内容
  .informationList {
    width: 100%;
    padding: 0.1rem 0;
    box-sizing: border-box;
    margin-bottom: 1rem;

    ul {
      li {
        margin-bottom: 0.15rem;
      }
      li.listData .top {
        display: flex;
        justify-content: space-between;
        .left {
          width: 70%;
          h3 {
            font-weight: bold;
            font-size: 0.3rem;
            color: #3c3c3c;
          }
          p {
            font-size: 0.24rem;
            color: #999;
            line-height: 0.3rem;
            margin-top: 0.1rem;
          }
        }
        .right {
          flex-shrink: 1;
          width: 1.66rem;
          height: 1.47rem;
          border-radius: 0.15rem;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .bottom {
        font-size: 0.22rem;
        display: flex;
        justify-content: space-between;
        padding: 0 0.2rem;
        box-sizing: border-box;
        margin-top: 0.05rem;
        .left_con {
          span {
            display: inline-block;
            padding: 0 0.1rem;
            box-sizing: border-box;
            &:nth-child(1) {
              border: 1px solid #da1e0b;
              border-radius: 0.1rem;
              padding: 0.03rem 0.1rem;
              font-size: 0.24rem;
              color: #da1e0b;
            }
            &:nth-child(2) {
              color: #b3b3b3;
            }
            &:nth-child(3) {
              color: #b3b3b3;
            }
          }
        }
        .right_con {
          span {
            display: inline-block;
            padding: 0 0.1rem;
            &:nth-child(1) {
              color: #da1e0b;
            }
            &:nth-child(2) {
              color: #b3b3b3;
            }
          }
        }
      }
    }
  }

  // 选择弹出框
  .model {
    position: absolute;
    top: 1.3rem;
    left: 0;
    bottom: 0;
    right: 0;
    //  background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: flex-start;
    z-index: 10;
    .box {
      width: 70%;
      background-color: #f8f8f8;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      padding: 0 0.3rem;
      box-sizing: border-box;
      font-size: 0.24rem;
      color: #646464;
      .first {
        width: 100%;
        padding: 0.2rem 0;
        box-sizing: border-box;
        .type_tit {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .line {
            display: inline-block;
            width: 35%;
            height: 1px;
            background-color: #646464;
          }
        }
        .type_con {
          display: flex;
          justify-content: space-around;
          margin-top: 0.25rem;
          flex-wrap: wrap;
          span {
            background-color: #fff;
            display: inline-block;
            padding: 0.15rem 0.7rem;
            box-sizing: border-box;
            margin-bottom: 0.2rem;
          }
          .Span {
            background: #38a83f;
          }
        }
      }
    }
    .right {
      width: 30%;
      position: absolute;
      top: 0;
      left: 70%;
      bottom: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.5);
    }
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 70%;
    height: 200px;
    overflow-y: scroll;
    border-radius: 0.2rem;
    background-color: #fff;
    ul{
      padding: 0.1rem 0.2rem;
      box-sizing: border-box;
      li{
        padding: 0.1rem ;
        box-sizing: border-box;
        font-size: 0.26rem;
        color:#333;
        display: flex;
        justify-content: space-around;
      }
    }
  }
}
</style>
